<template>
  <div>
    <div class="all-div">
      <div class="itemRow" style="margin-left:20px;">
        <input type="checkbox"  @click="selected($event,model)"/>
        <div v-show="isFolder" @click="expandOrCollapse">
          <i class="el-icon-caret-bottom" v-if="open"></i>
          <i  v-else class="el-icon-caret-right"></i>
        </div>
        <div class="hover-div" @mouseover="flag=true" @mouseout="flag=false">
          <div :id="model.level" class="model-title" @click="expandOrCollapse">{{model.areaname}}</div>
          <div class="model-right">
             <el-button type="primary" icon="plus" size="mini" v-show="flag==true" @click="add(model.parentid,model.areacode,model.areauid)"></el-button>
             <el-button type="primary" icon="delete"  size="mini" v-show="flag==true"  @click="remove(model.areauid)"></el-button>

             <el-button type="primary" icon="edit" size="mini" v-show="flag==true" @click="edit(model.parentid, model.areacode, model.areauid)"></el-button>

           </div>
        </div>

      </div>
    </div>
    <div v-show="open" v-if="isFolder">
      <navigation v-for="row in model.children" :model="row"></navigation>
    </div>
  </div>
</template>

<script>
 import req from '../util/request.js'
  export default {
    name: 'navigation',

    props: {

      model: {
        type: Object
      },

      length: {
        type: Number
      }
    },

    data () {
      return {
        flag:false,
        open:false,
        isFolder:true,
        arrays:[]
      }
    },
    created(){
      this.isFolder=this.isFolded()
    },
    methods: {
      isFolded(){
        return this.model.children && this.model.children.length;
      },
      add(pid,pCode,aid){

        let val = prompt("请输入要添加的节点的名称：");
           var vm=this;
           req.jQ_ajax({
            type:"post",
            url:'/area',
            data:{
                parentid:pid,
                areacode:pCode,
                areaname:val

             },
             success:function(data){
                 vm.model.children.push({
                 areauid:data.areauid,
                 areacode:data.areacode,
                 parentid:data.parentid,
                 areaname:data.areaname,

                  children: []
                });



             },
             error:function(data){

             }
          })



      },

      // 移除节点
      remove(aid){
        var self = this;
     		this.$confirm('确认删除吗?', '提示', {}).then(()=>{
                req.jQ_ajax({
                        type:"DELETE",
                        url:'/area/'+aid,

                         success:function(data){

                         },
                         error:function(data){

                         }
                      })
     		}).catch(()=>{

        })

      },

    selected(e,row){
        var vm=this;
         if(e.target.checked){
            this.$emit('selectedpare',row)
         }



    },
      // 编辑节点名称
      edit(pid,pCode,aid){

        let rename = prompt('请输入修改后的节点名称：');

         var vm=this;
         req.jQ_ajax({
          type:"PUT",
          url:'/area/'+aid,
          data:{
              parentid:pid,
              areacode:pCode,
              areaname:val

           },
           success:function(data){
                vm.model.areaname = rename;
           },
           error:function(data){

           }
        })

      },

      /**
       * 展开/收起功能
       */
      expandOrCollapse(){
        if(this.isFolder){
             this.open = !this.open;
        }

      },
      jump(url){
        var self = this;
        self.$router.push({path:url})
      },

      // 升序排列
       orderAsce(){
           function compare(property) {
               return function (a, b) {
               var value1 = a[property];
               var value2 = b[property];
               return value1 - value2;
           }
         }
          this.model.children.sort(compare('name'));
       },

       // 降序排列
       orderDesc(){
       this.orderAsce();
       this.model.children.reverse();
       }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .all-div{
    padding-left:6px;

  }
  .itemRow {
    display:-webkit-box;
     height:36px;
    text-align: left;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:6px;

    line-height:36px;
    color:#666;
  }
  .itemRow:hover{
    background:#efefef;
  }
  .itemRow span,.itemRow img{
    cursor: pointer;
  }
  .itemRow span{
    font-size: 1.1vw;
  }
  .hover-div{
    display:-webkit-box;
    width:100%;
    height:36px;
    line-height:36px;
  }
  .model-title{
      width:60%;
  }
  .model-right{
     -webkit-box-flex:1;
     padding-right:10px;
  }

</style>
